React常用的Hook函数主要包括以下几种：

1. useState

• 用途：在函数组件中添加state。
• 返回值：一个包含当前state值和更新该值的函数的数组。
• 示例：

function Example() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

2. useEffect

• 用途：在组件中执行副作用操作（如数据获取、订阅或手动修改DOM）。
• 返回值：一个清除函数（在组件卸载或依赖项改变时执行）。
• 示例：

useEffect(() => {
  // 组件挂载后执行
  document.title = 'Hello World';
  // 返回一个清理函数，在组件卸载或依赖项改变时执行
  return () => {
    // 清理操作
  };
}, [dependencyArray]); // 可选的依赖项数组，用于控制副作用的重新执行

3. useContext

• 用途：让函数组件能够订阅React Context。
• 返回值：当前Context的值。
• 用法：

const value = useContext(MyContext);

4. useReducer

• 用途：使用reducer函数来管理组件的state，类似于Redux的工作方式。
• 返回值：一个包含当前state值和dispatch函数的数组。
• 示例：

const initialState = {count: 0};
function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}
function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
    </>
  );
}

5. useCallback

• 用途：返回一个记忆化的回调函数版本，该回调函数在依赖项不变的情况下不会改变。
• 返回值：记忆化的回调函数。
• 用法：

const memoizedCallback = useCallback(
  () => {
    // 你的回调函数逻辑
  },
  [dependencyArray] // 依赖项数组
);

6. useMemo

• 用途：返回一个记忆化的值，它仅会在依赖项改变时重新计算该值。
• 返回值：记忆化的值。
• 用法：

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

7. useRef

• 用途：持久化数据，其.current属性被初始化为传递给useRef()的参数。该对象在组件的整个生命周期内保持不变。
• 返回值：一个可变的对象，其.current属性被初始化为指定的值。
• 用法：

const myRef = useRef(initialValue);

8. useLayoutEffect

• 用途：其用法与useEffect相同，但它会在所有的DOM变更之后同步调用，可以用于读取DOM布局并同步触发重渲染。
• 返回值：一个清除函数（在组件卸载或依赖项改变时执行）。
• 注意事项：useLayoutEffect在所有的DOM变更之后同步调用，因此它适合用于需要读取DOM布局或执行与布局相关的同步操作的情况。但由于它是同步执行的，可能会阻塞浏览器的绘制，因此应谨慎使用。

9. useImperativeHandle

• 用途：自定义使用useRef创建的ref对象的行为，使其能在父组件中使用一些命令式方法。
• 返回值：无（这是一个自定义Hook的辅助Hook）。
• 用法：

useImperativeHandle(ref, createHandle, [deps]);

10. useDebugValue

• 用途：在React开发者工具中显示自定义的label，这对于调试自定义Hooks尤其有用。
• 返回值：无（这是一个辅助Hook，用于改善调试体验）。
• 用法：

useDebugValue(value);

这些Hook函数提供了在函数组件中使用state和其他React特性的强大方式，而无需转换为类组件。开发者可以根据具体需求选择合适的Hook来实现组件的功能。